<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item label="结算时间：">
            <el-row>
              <el-col :span="12">
                <el-date-picker
                v-model="searchQuery.beginSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="开始时间">
              </el-date-picker>
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  v-model="searchQuery.endSearchTime"
                  type="datetime"
                  value-format="timestamp" format="yyyy-MM-dd HH:mm"
                  placeholder="结束时间">
                </el-date-picker>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="操作时间">
            <el-row>
              <el-col :span="12">
                <el-date-picker
                  v-model="searchQuery.operatorBeginSearchTime"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm"
                  value-format="timestamp"
                  placeholder="开始时间"
                >
                </el-date-picker>
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  v-model="searchQuery.operatorEndSearchTime"
                  type="datetime"
                  default-time = "23:59:59"
                  format="yyyy-MM-dd HH:mm"
                  value-format="timestamp"
                  placeholder="结束时间"
                >
                </el-date-picker>
              </el-col>
            </el-row>

          </el-form-item>
          <el-button type="primary" plain size="small" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
      <div class="op">
        <el-button type="primary" size="mini" @click="exportExcel()">导出
        </el-button>
        <el-button size="mini" type="primary" plain @click="orderAdd">新增</el-button>
      </div>
    </div>
    <ad-table ref="order"
              :data="orderList" :show-summary="orderSummary" v-loading="orderInitLoading" border u-table
              :data-changes-scroll-top="orderIsScrollTop"  @table-body-scroll="orderGetMoreList"
              @row-click="orderSelectRow" @selection-change="orderSelectRows"
              :searchQuery="orderSearchQuery" @search="orderGetInitList"
              @sort-change="orderSortInitList" @filter-change="orderFilterInitList" :height="tableHeight">
      <ad-table-column label="序号" type="index" ctype="index" fixed/>
      <ad-table-column label="订单号" fixed="left" prop="orderSubNo" href="/order/detail" id="orderId" ctype="orderNo"
                       searchable/>
      <ad-table-column label="结算时间" prop="settlementTime" ctype="datetime" sortable/>
      <ad-table-column label="操作时间" prop="createTime" ctype="datetime" sortable/>
      <ad-table-column label="结算人" prop="settlementUser" w="3c1f" searchable/>
      <ad-table-column label="操作人" prop="createUser" w="3c1f" searchable/>
      <ad-table-column label="费用类型" prop="type" w="3c2f" dictName="finance_type" filterable/>
      <ad-table-column label="科目" prop="customerSubject" w="3c2f" dictName="finance_customer_subject" filterable/>
      <ad-table-column label="渠道" prop="channel" w="3c2f" dictName="finance_channel" filterable/>
      <ad-table-column label="收款" prop="collectionFee" sortable w="3c1f"/>
      <ad-table-column label="付款" prop="paymentFee" sortable w="3c1f"/>
      <ad-table-column label="余款" prop="balanceFee" sortable w="3c1f"/>
      <ad-table-column label="制单时间" prop="orderCreateTime" ctype="datetime" sortable/>
      <ad-table-column label="制单人" prop="orderCreateUser" w="3c1f" searchable sortable/>
      <ad-table-column label="运单号" prop="transportNo" w="3c1f" searchable/>
      <ad-table-column label="发运时间" prop="transportTime" ctype="datetime" sortable/>
      <ad-table-column label="发运人" prop="transportUser" w="3c1f" searchable/>
      <ad-table-column label="审核状态" prop="result" w="3c1f" >
        <template v-slot="{row}">
          <span v-if="!row.orderSubNo && row.result == 1">待审核</span>
          <span v-if="!row.orderSubNo && row.result == 2">已通过</span>
          <span v-if="!row.orderSubNo && row.result == 3">已拒绝</span>
          <span v-if="!row.orderSubNo && row.result == 4">已通过</span>
          <span v-if="!row.orderSubNo && row.result == 5">已驳回</span>
          <span v-if="row.orderSubNo">-</span>
        </template>
      </ad-table-column>
      <ad-table-column label="结算备注" prop="remark" width="200"/>
      <ad-table-column label="操作" fixed="right" width="150">
        <template v-slot="{row}">
          <div class="op">
            <el-button type="text" class="op-btn" @click="openOrderAdder(row)">查看</el-button>
            <el-button v-if="!row.orderSubNo && row.result == '1'" type="text" class="op-btn" @click="passOrDecline(row,'2')">通过</el-button>
            <el-button v-if="!row.orderSubNo && row.result == '1'" type="text" class="op-btn" @click="passOrDecline(row,'3')">拒绝</el-button>
            <el-button v-if="!row.orderSubNo && row.result == '4'" type="text" class="op-btn" @click="passOrDecline(row,'5')">驳回</el-button>
            <el-button v-if="row.type > 9" type="text" class="op-btn" @click="deleteSettlement(row.id)">删除</el-button>
          </div>
        </template>
      </ad-table-column>
    </ad-table>

    <el-dialog title="添加费用信息" :visible.sync="orderAdder.visible" custom-class="ad-dialog" width="600px">
      <adder :mode="orderAdder.mode" :id="orderSelectedRowId" :visible.sync="orderAdder.visible" @saved="orderSaved"/>
    </el-dialog>
    <el-dialog title="费用详细" :show-close="true"
               :closeOnClickModal="false"
               :visible.sync="dialogVisible"
               width="600px"
               class="customerFormDialog">
      <div id="span8">
        <el-descriptions :column="2" border size="mini">
          <el-descriptions-item label="费用类型">
            <value :model="infoForm" prop="type" dictName="finance_type"
                   style="display: inline-block;"/>
          </el-descriptions-item>
          <el-descriptions-item label="科目">
            <value :model="infoForm" prop="customerSubject" dictName="finance_customer_subject"/>
          </el-descriptions-item>
          <el-descriptions-item label="结算人">
            <value :model="infoForm" prop="settlementUser"/>
          </el-descriptions-item>
          <el-descriptions-item label="结算时间">
            <value :model="infoForm" prop="settlementTime"/>
          </el-descriptions-item>
          <el-descriptions-item label="操作人">
            <value :model="infoForm" prop="createUser"/>
          </el-descriptions-item>
          <el-descriptions-item label="操作时间">
            <value :model="infoForm" prop="createTime"/>
          </el-descriptions-item>
          <el-descriptions-item label="收款金额">
            <value :model="infoForm" prop="collectionFee"/>
          </el-descriptions-item>
          <el-descriptions-item label="付款金额">
            <value :model="infoForm" prop="paymentFee"/>
          </el-descriptions-item>
          <el-descriptions-item label="余款金额">
            <value :model="infoForm" prop="balanceFee"/>
          </el-descriptions-item>
          <el-descriptions-item label="渠道">
            <value :model="infoForm" prop="channel" dictName="finance_channel"/>
          </el-descriptions-item>
          <el-descriptions-item label="付款凭证" :span="2">
            <div v-show="infoForm.imgList.length==0" class="noImg">
              暂无图片
            </div>
            <div v-show="infoForm.imgList.length>0" style="line-height: 16px">
              <el-image v-for="url in infoForm.imgList" :key="url" :src="url"
                        style="width: 90px; height: 58px;margin-right: 10px;"
                        :preview-src-list="infoForm.imgList"></el-image>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            <value :model="infoForm" prop="remark"/>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import Value from '@/components/AdValue'
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import AdMonthSelect from '@/components/AdMonthSelect'
  import Date from '@/utils/datetime'
  import adder from './add'
  import adTable from '@/mixins/adTable/index'
  import api, {getList as orderApiGetList,settlementAudit} from '@/api/dayKeeping'
  import dateRange from '@/utils/dateRange'
  import {download} from '@/api/data'
  import {downloadFile} from '@/utils/index'
  import moment from 'moment'

  export default {
    name: 'finance-dayKeeping',
    components: {Value, AdTable, AdTableColumn, AdMonthSelect, adder},
    dicts: ['finance_type', 'finance_customer_subject', 'finance_channel'],
    mixins: [adTable('order')],
    data() {
      return {
        searchQuery: {
          beginSearchTime: dateRange.getCurrentMonth()[0].getTime(),
          endSearchTime: dateRange.getCurrentMonth()[1].getTime(),
        },
        tableHeight: document.documentElement.clientHeight - 140,
        dialogVisible: false,
        infoForm: {
          type: null,
          customerSubject: null,
          settlementUser: null,
          settlementTime: null,
          createUser: null,
          createTime: null,
          collectionFee: null,
          paymentFee: null,
          balanceFee: null,
          channel: null,
          imgList: [],
          remark: null,
        },
      }
    },
    created() {
      this.orderGetInitList()
    },
    methods: {
      orderApiGetList,
      settlementAudit,
      //导出
      exportExcel() {
        let self = this;
        download(`api/settlement/download`, self.searchQuery).then(res => {
          if(res.data.size){
            downloadFile(res.data, res.headers.downloadFileName, 'xlsx')
          }else{
            this.$message({
              message: '暂无数据',
              type: 'warning'
            })
          }
        })
      },
      queryList: function () {
        let self = this;
        self.orderGetInitList()
      },
      search(times) {
        console.log('时间',times)
        this.searchQuery.beginSearchTime = times.beginSearchTime
        this.searchQuery.endSearchTime = times.endSearchTime
        this.orderApiGetList()
      },
      openOrderAdder(data) {
        let self = this;
        self.dialogVisible = true;
        api.get(data.id).then(res => {
          self.infoForm = res.data;
        })
      },
      // 审核
      passOrDecline(row, status) {
        let self = this;
        this.$confirm( `确定${status == 2?'通过':(status ==3?'拒绝':'驳回')}？`, '', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning',
          showClose: false,
        }).then(() => {
          self.settlementAudit({
            financeSettlementId: row.id,
            result: status
          }).then(res => {
            if (res.code == 0) {
              this.$notify({
                title: '审核',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              this.orderGetInitList();
            } else {
              this.$notify({
                title: '审核',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        })
      },
      deleteSettlement(id) {
        this.$confirm('确定删除？', '', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning',
          showClose: false,
        }).then(() => {
          api.delete(id).then(res => {
            if (res.code == 0) {
              this.$notify({
                title: '删除',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              this.orderGetInitList();
            } else {
              this.$notify({
                title: '删除',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>